<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>吾之主页</title>
    <link rel="stylesheet" href="../static/css/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
    <!--导航-->
    <nav th:replace="_fragments :: menu(6)" class="ui  inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui blue header item">鄭氏博客</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="ui red  home icon"></i>我的首页</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="green sitemap icon"></i>博文分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="purple tags icon"></i>博文标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="teal clone icon"></i>博文归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="brown info circle icon"></i>与吾有关</a>
                <div class="m-item right item m-mobile-hide">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="请输入想要搜索的......">
                        <i class="teal searchengin link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="" class="ui menu toggle black icon button m-right-top m-mobile-show"> <i class="sidebar icon"></i></a>
    </nav>
    <!--中间部分-->
            <div class="content" style="background: url('https://unsplash.it/1600/900?random') no-repeat fixed;height: 100%">
                <p id='hitokoto'  style="width:760px;padding-left:270px;
    padding-top:80px;font-weight: bold;font-size: 30px;font-family:'Myriad Pro Cond';color: #fff;">
                </p>
        </div>
    <!--/*/<th:block>/*/-->
    <script src="../static/js/jquery-3.6.0.min.js" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
        return false;
    });
    $('.qq').popup();
    $('.wx').popup({
        popup : $('.my-weixin'),
        position : 'bottom center'
    });
    $('.wb').popup({
        popup : $('.my-weibo'),
        position : 'bottom center'
    });

</script>
    <script>
        fetch('https://v1.hitokoto.cn')
            .then(response => response.json())
        .then(data => {
            const hitokoto = document.getElementById('hitokoto')
            console.log(data)
            hitokoto.innerText = data.hitokoto
        })
        .catch(console.error());
    </script>
    <script src="../static/js/jquery-3.6.0.min.js" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <link rel="stylesheet" href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}">
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>
</html>